<template>
	<view class="item">
		<view class="title">
			<view class="left">
				<icon class="ic-shiyanshi iconfont bs-shiyanshi" type=""></icon>
				<text>{{ item.name }}</text>
			</view>
			<view class="right dui" v-if="item.status == '1'">
				<text>可预约</text>
				<icon class="ic-dui iconfont bs-dui"></icon>
			</view>
			<view class="right cuo" v-if="item.status == '2'">
				<text>已约满</text>
				<icon class="ic-cuo iconfont bs-cuo"></icon>
			</view>
			<view class="right zanting" v-if="item.status == '3'">
				<text>未开放</text>
				<icon class="ic-cuo iconfont bs-cuo"></icon>
			</view>
			<view class="right guzhang" v-if="item.status == '4'">
				<text>维护中</text>
				<icon class="ic-guzhang iconfont bs-guzhang"></icon>
			</view>
			<view class="right jianshe" v-if="item.status == '5'">
				<text>建设中</text>
				<icon class="ic-jianshe iconfont bs-jianshe"></icon>
			</view>
		</view>

		<view class="bottom">
			<view class="address">
				<icon class="ic-weizhi iconfont bs-weizhi"></icon>
				<text>位置:&nbsp;&nbsp;{{ item.ssxy + "-" + item.address }}</text>
			</view>
			<view class="address">
				<icon class="ic-weizhi iconfont bs-shebei"></icon>
				<text>设备数量:&nbsp;&nbsp;{{ item.sbsl }}台</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import {
	ref,
	reactive
} from 'vue'

const props = defineProps({
	item: {
		type: Object,
		default: {},
	},
})
</script>

<style lang="scss" scoped>
@import "/static/css/iconfont.css";

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.item {
	margin: 0 15px 10px;
	padding: 12px 15px;
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	animation: fadeIn 0.5s ease-out;

	&:active {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	}

	.title {
		width: 100%;
		display: flex;
		align-items: center;
		color: #2d2d2d;
		justify-content: space-between;

		.left {
			justify-content: center;
			align-items: center;
			display: flex;

			.ic-shiyanshi {
				color: #2196f3;
				font-size: 20px;
			}

			text {
				font-size: 14px;
				margin-left: 5px;
				font-weight: bold;
			}
		}

		.right {
			font-size: 12px;
			font-weight: bold;
			display: flex;
			align-items: center;

			.ic-dui {
				font-size: 12px;
				margin-left: 3px;
			}

			.ic-cuo {
				font-size: 12px;
				margin-left: 3px;
			}

			.ic-jianshe {
				font-size: 16px;
				margin-left: 3px;
			}

			.ic-guzhang {
				font-size: 10px;
				margin-left: 3px;
			}

			text {
				margin-right: 3px;
			}
		}

		.dui {
			color: #4cd964;
		}

		.cuo {
			color: #F17662;
		}

		.jianshe {
			color: #f69c00;
		}

		.zanting {
			color: #9BA0AC;
		}

		.guzhang {
			color: #F0B500;
		}
	}

	.bottom {
		margin-top: 10px;

		.address {
			display: flex;
			align-items: center;
			color: #797979;
			margin-left: 20px;
			margin-top: 5px;

			.ic-weizhi {
				font-size: 14px;
				color: #48d3cf;
			}

			text {
				margin-left: 5px;
				font-size: 12px;
				font-weight: 500;
			}
		}
	}
}
</style>